<template>
  <div id="Effective">
    <div class="ge"></div>
    <div class="spinner geto" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>    
    <div v-for="(item,i) in ContentTwo" :key="i">
      <div class="contentTwo-head">
          <div>
              <div class="contentTwo-left"><span>{{item.SERVERPART_NAME | dateEmpty}}</span></div>
              <div class="contentTwo-right">               
                  <span>{{item.TREATMENT_MARK | dateEmpty}}</span>
              </div>
              <br />
          </div>
          <div>
              <div class="contentTwo-name"><span class="contentTwo-text">{{item.SHOPNAME | dateEmpty}}</span></div>
              <br />
          </div>
          <div>
              <div class="contentTwo-left">结账人员：{{item.WORKER_NAME | dateEmpty}}</div>
              <div class="contentTwo-right"><span>{{item.ENDACCOUNT_DATE | dateEmpty}}</span></div>
              <br />
          </div>					
          <div v-show="contrastCom(item.DESCRIPTION_STAFF)">
              <div class="contentTwo-left">校验信息：{{item.DESCRIPTION_STAFF | dateEmpty}}</div>
              <div class="contentTwo-right"><span>{{item.DESCRIPTION_DATE | dateEmpty}}</span></div>
              <br />
          </div>					
          <div v-show="contrastCom(item.DIFFERENCE_REASON)">
              <div class="lie-left"></div>
              <div class="lie_right2"><span>{{item.DIFFERENCE_REASON | dateEmpty}}</span></div>
              <br />
          </div>            
          <div v-show="contrastCom(item.APPROVE_STAFF)">
              <div class="contentTwo-left">审核人员：{{item.APPROVE_STAFF | dateEmpty}}</div>
              <div class="contentTwo-right"><span>{{item.APPROVE_DATE | dateEmpty}}</span></div>
              <br />
          </div>					 
          <div v-show="contrastCom(item.APPROVED_INFO)">
              <div class="lie-left"></div>
              <div class="lie_right2"><span>{{item.APPROVED_INFO | dateEmpty}}</span></div>
              <br />
          </div>              
          <div v-show="Toexamine" class="to-examine" @click="menuImg()">
              <img src="../../static/img/BusinessSub/ddsh.png" width="20%" /> 
              审核
          </div>   
          <div v-show="contrastCom(item.ENDACCOUNT_DESC)">   
            <div>
                <div class="contentTwo-left">主任名称：{{zhur[0]}}</div>
                <div class="contentTwo-right"><span>{{zhur[1]}}</span></div>
                <br />
            </div>  
            <div>
                <div class="lie-left"></div>
                <div class="lie_right2"><span>{{zhur[2]}}</span></div>
                <br />
            </div>                   
          </div>  
          <br />                           
      </div>   
      <p class="commodityP">营收详情</p>
      <div class="commodity">
        <div>
          <div class="left">
            <div class="commodityContent">
              <img src="../../static/img/Effective/ssje.png" width="25%" />
              <span class="ctitle">销售金额</span>
              <span class="color1">{{item.TOTALSELLAMOUNT | ComMoney2}}</span>
            </div>  
          </div>
          <div class="middle">
            <div class="commodityContent zyborder">
              <img src="../../static/img/Effective/jk.png" width="25%" />
              <span class="ctitle">缴款金额</span>
              <span class="color1">{{item.CASHPAY_DOWNLORD | ComMoney2}}</span>
            </div>              
          </div>
          <div class="right">
            <div class="commodityContent">
              <img src="../../static/img/Effective/cdz.png" width="25%" />
              <span class="ctitle">长短款额</span>
              <span class="color1">{{item.DIFFERENT_PRICE | ComMoney2}}</span>
            </div>                      
          </div>
          <br />  
        </div>
        <div v-show="!zrqr">
          <div class="left">
            <div class="commodityContent">
              <img src="../../static/img/Effective/ssz.png" width="25%" />
              <span class="ctitle">实收金额</span>
              <span class="color1">{{item.CASHPAY | ComMoney2}}</span>              
            </div>          
          </div>
          <div class="middle">
            <div class="commodityContent zyborder">
              <img src="../../static/img/Effective/yd.png" width="25%" />
              <span class="ctitle">移动支付</span>
              <span class="color1">{{item.MOBILEPAYMENT | ComMoney2}}</span>
            </div>    
          </div>
          <div class="right">
            <div class="commodityContent">
              <img src="../../static/img/Effective/cz.png" width="25%" />
              <span class="ctitle">冲正金额</span>
              <span class="color1">{{item.CORRECT_AMOUNT | ComMoney2}}</span>              
            </div>         
          </div>
          <br />  
        </div>
        <!-- 主任模块 -->
        <div v-show="zrqr">
          <div class="left">
            <div class="commodityContent">
              <img src="../../static/img/Effective/ssz.png" width="25%" />
              <span class="ctitle">实收金额</span>
              <span class="color1">{{item.CASHPAY | ComMoney2}}</span>
            </div>          
          </div>
          <div class="middle">
            <div class="commodityContent zyborder">
              <img src="../../static/img/Effective/yd.png" width="25%" />
              <span class="ctitle">移动支付</span>
              <span class="color1">{{item.MOBILEPAYMENT | ComMoney2}}</span>              
            </div>    
          </div>
          <div class="right">
            <div class="commodityContent">
              <img src="../../static/img/Effective/wcz.png" width="25%" />
              <span class="ctitle">误差率</span>
              <span class="color1" :class="cor">{{wcl}}%</span>              
            </div>         
          </div>
          <br />  
        </div>  
        <!-- end  -->
        <div>
          <div class="left">
            <div class="commodityContent">
              <img src="../../static/img/Effective/kd2.png" width="25%" />
              <span class="ctitle">客单数量</span>
              <span class="color1">{{item.TICKETCOUNT | dateEmpty}}</span>
            </div>              
          </div>
          <div class="middle">
            <div class="commodityContent zyborder">
              <img src="../../static/img/Effective/kd.png" width="25%" />
              <span class="ctitle">客单均价</span>
              <span class="color1">{{moneyJj | ComMoney2}}</span>
            </div>                    
          </div>
          <div class="right">
            <div class="commodityContent">
              <img src="../../static/img/Effective/sy.png" width="25%" />
              <span class="ctitle">收银人员</span>
              <span class="color1">{{item.CASHIER_NAME | depteCashier}}</span>
            </div>            
          </div>
          <br />  
        </div>                     
      </div>        
    </div>      
    <mt-popup v-model="PopupVisible3" position="">
        <div class="opinion">
            <p class="opinion-title">意见</p>
            <mt-field placeholder="" type="textarea" rows="4" class="PURCHASE-DESC" v-model="PURCHASEDESC" @input="desTextarea"></mt-field>
            <hr class="opinion-hr" />
        </div>
        <button class="buttton1" :class="disabledClass" v-bind:disabled="disabled" @click="examine()">通过</button>
        <br />
    </mt-popup> 
    <div class="return" @click="returnto" v-show="!spinner">
      返回上一级
    </div>
    <!-- 审核动画 -->
    <div class="trialani" v-show="trialani">
      <img :src="trialImg" alt="" width="45%">
      <p v-text="trialtext"></p>
    </div>
    <!-- end -->
  </div>
</template>
<script>
import store from "@/store/store.js";
import { getDay } from "@/util/publicJS.js";
import trialImg from "../../static/img/BusinessSub/33.png";
import trialImgT from "../../static/img/BusinessSub/complete.gif";
import trialImgF from "../../static/img/BusinessSub/completeF.gif";
import { Indicator, Field } from "mint-ui";
export default {
  name: "Effective",
  data() {
    return {
      Url:
        "http://mall.eshangtech.com:8010/MobileServicePlatform/Handler/handler_ajax.ashx?",
      ContentTwo: [],
      Toexamine: false,
      PopupVisible3: false,
      Opinion: "", //意见
      trialani: false,
      trialtext: "",
      trialImg: "../../static/img/BusinessSub/33.png",
      trialImgT: "../../static/img/BusinessSub/complete.gif",
      trialImgF: "../../static/img/BusinessSub/completeF.gif",
      spinner: true,
      PURCHASEDESC: "",
      disabled: true,
      disabledClass: "disabled",
      examineType: "",
      opinionType: "",
      moneyJj: "",
      cans: [],
      zhur: [],
      zrqr: false,
      wcl: "",
      cor: ""
    };
  },
  methods: {
    // 头部业务信息
    loadContentTwo: function() {
      let date = getDay(-1, "/");
      if (store.state.date != "" && store.state.date != "null") {
        date = store.state.date;
      }
      this.$http
        .get(
          this.Url +
            "action_type=GetEndaccountByOpenid&action_data=" +
            store.state.openid +
            "&action_record=" +
            date +
            "&Serverpart_ID=&Endaccount_ID=" +
            this.cans[0]
        )
        .then(response => {
          // success callback
          this.spinner = false;
          this.ContentTwo = response.data.Endaccount;
          this.zhur = response.data.Endaccount[0].ENDACCOUNT_DESC.split("|");        
          if (response.data.Endaccount[0].CASHPAY != 0) {
            let moj =
              response.data.Endaccount[0].CASHPAY /
              response.data.Endaccount[0].TICKETCOUNT;
            let l = moj.toString().indexOf(".") + 3;
            this.moneyJj = moj.toString().substring(0, l);
          } else {
            this.moneyJj = "0";
          }
          if (response.data.Endaccount[0].TOTALSELLAMOUNT == 0) {
            this.wcl = "0.00";
          } else {
            let cdk;
            if (response.data.Endaccount[0].DIFFERENT_PRICE < 0) {
              cdk = response.data.Endaccount[0].DIFFERENT_PRICE * -1;
            } else {
              cdk = response.data.Endaccount[0].DIFFERENT_PRICE;
            }
            this.wcl = (
              cdk /
              response.data.Endaccount[0].TOTALSELLAMOUNT *
              100
            ).toFixed(2);
            if (this.wcl > 0.3) {
              this.cor = "cor";
            }
          }
          if (response.data.Endaccount[0].TREATMENT_MARK == "主任确认") {
            this.zrqr = true;
            this.$http
              .get(
                this.Url +
                  "action_type=GetModuleAuthority&action_data=" +
                  store.state.openid +
                  "&SERVERPART_ID=" +
                  this.cans[1] +
                  "&action_record=43ecf139-66a7-421b-ba0f-bf7ddd77437d"
              )
              .then(response => {
                // success callback
                if (response.data.ModuleAuthorityObject.length > 0) {
                  this.examineType = "SubmitEndaccount";
                  this.opinionType = "DIRECTOR_INFO";
                  this.Toexamine = true;
                }
              })
              .catch(error => {
                // console.log(error);
              });
          } else if (response.data.Endaccount[0].TREATMENT_MARK == "待审核") {
            this.$http
              .get(
                this.Url +
                  "action_type=GetModuleAuthority&action_data=" +
                  store.state.openid +
                  "&SERVERPART_ID=" +
                  this.cans[1] +
                  "&action_record=2eada261-97e7-4881-998b-06b1cfc290af"
              )
              .then(response => {
                // success callback
                if (response.data.ModuleAuthorityObject.length > 0) {
                  this.examineType = "ApproveEndaccount";
                  this.opinionType = "APPROVED_INFO";
                  this.Toexamine = true;
                }
              })
              .catch(error => {
                // console.log(error);
              });
          } else {
            this.examineType = "";
            this.Toexamine = false;
          }
        })
        .catch(error => {
          // console.log(error);
        });
    },
    menuImg: function() {
      this.PURCHASEDESC = "";
      this.PopupVisible3 = !this.PopupVisible3;
    },
    // 意见非空验证
    desTextarea: function() {
      if (this.PURCHASEDESC != "") {
        this.disabled = false;
        this.disabledClass = "";
      } else {
        this.disabled = true;
        this.disabledClass = "disabled";
      }
    },
    // 审核
    examine: function() {
      console.log(this.examineType);
      console.log(this.opinionType);
      this.Opinion = this.PURCHASEDESC;
      this.PopupVisible3 = false;
      Indicator.open();
      this.$http
        .get(
          this.Url +
            "action_type=" +
            this.examineType +
            "&action_data=" +
            this.cans[0] +
            "&action_record=" +
            store.state.wxid +
            "&" +
            this.opinionType +
            "=" +
            this.Opinion
        )
        .then(response => {
          Indicator.close();
          // success callback
          // alert(response.data);
          if (response.data == "1") {
            this.trialani = true;
            this.trialImg = trialImgT;
            this.trialtext = "已通过";
            setTimeout(() => {
              this.trialani = false;
              this.trialImg = trialImg;
            }, 2000);
            this.loadContentTwo();
          } else {
            this.trialani = true;
            this.trialImg = trialImgF;
            this.trialtext = "未通过";
            setTimeout(() => {
              this.trialani = false;
              this.trialImg = trialImg;
            }, 2000);
            this.loadContentTwo();
          }
        })
        .catch(error => {
          // console.log(error);
        });
    },
    //商品信息对比
    contrastCom: function(com) {
      if (com == "&nbsp;") {
        return false;
      } else {
        return true;
      }
    },
    // 返回
    returnto: function() {
      this.$router.push({ path: "/Homepage/Service/" + this.cans[1] });
    }
  },
  created() {
    this.cans = this.$route.params.id.split(",");
    this.loadContentTwo();
    // alert(store.state.openid+","+store.state.wxid);
  }
};
</script>

<style scoped>
.ge {
  padding: 2.5rem 0 0 0;
}
.geto {
  padding: 1rem 0 0 0;
}
.contentTwo-head {
  width: 100%;
  margin: 0.5rem 0 0 0;
  padding: 0.5rem 0.5rem 0.5rem 1rem;
  background-color: #fff;
  position: relative;
}
.contentTwo-left {
  width: 60%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.contentTwo-right {
  width: 40%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: right;
  padding-right: 0.5rem;
}
.contentTwo-name {
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.contentTwo-text {
  font-size: 20px;
  color: #ec9061;
}
.lie-left {
  width: 18%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.lie_right {
  width: 82%;
  float: left;
  height: 1.5rem;
  line-height: 1.5rem;
}
.lie_right2 {
  width: 82%;
  float: left;
  line-height: 1.5rem;
}
.to-examine {
  width: 15%;
  height: 1.5rem;
  line-height: 1.5rem;
  float: right;
}
.opinion {
  width: 15rem;
  padding: 15px 10px;
  text-align: center;
  border-bottom: 1px solid #dedede;
  border-radius: 2px 2px 0 0;
}
.opinion-title {
  font-size: 16px;
}
.PURCHASE-DESC {
  width: 100%;
  border: none #fff;
  background: transparent;
  outline: none;
  color: #000;
}
.opinion-hr {
  width: 100%;
  color: black;
  margin: 0.35rem auto;
}
.buttton1 {
  width: 100%;
  background-color: #4c4b5b;
  border: none;
  height: 2.25rem;
  color: #fff;
  float: left;
}
.disabled {
  opacity: 0.3;
}
.commodityP {
  color: #b7b8ba;
  padding: 0.5rem;
}
.commodityContent {
  width: 100%;
  height: 2rem;
  line-height: 2rem;
  margin: 1rem auto;
  position: relative;
}
.commodityContent img {
  position: absolute;
  top: 0.3rem;
  left: 0.8rem;
}
.zyborder {
  border: 1px solid rgb(211, 202, 202);
  border-top: none;
  border-bottom: none;
}
.commoditytitle {
  font-size: 20px;
  color: #ec9061;
  padding-left: 1rem;
  padding-top: 0.5rem;
}
.trialani {
  width: 10rem;
  height: 6rem;
  box-shadow: 0px 1px 8px 0.2px #e2e2e2;
  text-align: center;
  background-color: #fff;
  position: fixed;
  top: 42%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.commodity {
  width: 100%;
  background-color: #fff;
  margin-bottom: 0.5rem;
}
.return {
  width: 95%;
  height: 2rem;
  line-height: 2rem;
  margin: 1rem auto;
  border-radius: 0.1rem;
  background-color: #4a4c5b;
  color: #fff;
  text-align: center;
  font-size: 16px;
}
.left {
  width: 33.3%;
  height: 4rem;
  text-align: center;
  border-bottom: 1px solid rgb(211, 202, 202);
  float: left;
}
.middle {
  width: 33.3%;
  height: 4rem;
  text-align: center;
  border-bottom: 1px solid rgb(211, 202, 202);
  float: left;
}
.right {
  width: 33.3%;
  height: 4rem;
  text-align: center;
  border-bottom: 1px solid rgb(211, 202, 202);
  float: left;
}
.di {
  border-bottom: none;
}
.color1 {
  color: #aaaaaf;
  position: absolute;
  top: 0.7rem;
  left: 3rem;
}
.ctitle {
  position: absolute;
  top: -0.45rem;
  left: 3rem;
}
.cor {
  color: red;
}
</style>

